import { useState, useEffect } from 'react'
import { Card } from 'antd';
import './index.css'
import { getaritle } from '../../plugins/getlogin'
import { useNavigate } from 'react-router-dom';
export const Child = (props) => {
    var typelist = []
    const [aritle, setaritle] = useState([]);
    const router = useNavigate()
    useEffect(() => {
        var list = { id: props.title }
        getaritle(list).then(e => {
            typelist.push(e.data)

            setaritle(e.data)

        })



    }, []);

    const rundetais = (i) => {

        router('/details', { state: { title: i } }
        )
    }
    var imgs = {
        width: '100%'
    }
    return (
        <div>
            {
                aritle.map((item, index) => {
                    return <Card style={{ width: '87vw' }} key={index} onClick={rundetais.bind(this, item.title)} >
                        <div className='aritles'>
                            <img src={item.picture} alt="" style={imgs} />
                            <div>{item.title}</div>
                            <div className='areas'>{item.area}</div>
                            <div className='footer'>
                                <div className='foothead'><img src={item.header} alt="" /> {item.name}</div>
                                <div>{item.time}</div>
                            </div>
                        </div>
                    </Card>
                })}
        </div>
    )
}